Ajax and ossn object not work

Malik Umer Farooq Posted in Technical Support 6 years ago

I write simple ajax script but it does not work when i type in box page hang-up and reload everything gone to hide
Here is snapshot of mu ajax code
enter image description here

And i want search value i write search script it return all result
Here is snap
enter image description here

Help me please

Replies
pk Malik Umer Farooq Replied 6 years ago

> Now, jquery is waiting until your complete page is 'ready' and then starts parsing. And your code is working again.

i do that jquery code work but not properly
my code become

    $(document).ready(function() {
    $('#search').keyup(function(){
        $('#control').css({'display':'none'});
        var search = $('#search').val();
        $.post(Ossn.site_url+'/Help',{action:search},function(data){
                //$('.search-result').html(data);
                alert(data);
            });
    }); 

});

if i uncomment this link "$(".search-result").html(data); page brake so i addalert(data);` it show in alert box following
so more help need so please sorry for distributions but in page.php i do i think correct

// rest code
    <?php if(isset($_POST['action'])){
    echo $title = $_POST['action'];   
} ?>
//// rest code

enter image description here

German Michael Zülsdorff Replied 6 years ago

> As its does not require add js in separate file but for best
> performance i think its suggested use another separate javaScript

Exactly! Speeding up performance - that's the reason Ossn is doing it like that.
With ossn_extend_view("js/opensource.socialnetwork", "helpdisk/js");
you are making your own javascript part of one big javasript file named opensource.socialnetwork.js which will be cached, if Ossn cache is turned on.
With your old code, your script could never be cached and had to be read again and again with every load of your Help page.

Okay, so your change was absolutely correct. But now, your script doesn't execute any more!
Why that?
Because with loading opensource.socialnetwork.js in advance now,
it is not guaranteed that the "#search" element you are referencing is already in place.
So, jquery is parsing your site too early,
and because "#search" is not there, it doesn't not know what do ...
The solution is to tell jquery to WAIT until your page is fully loaded, and THEN start checking elements. And the command to do so is

$(document).ready(function()

So, you need to embed your complete script like

$(document).ready(function() {
    $('#search').keyup(function(){
       .....
    });
});

Now, jquery is waiting until your complete page is 'ready' and then starts parsing. And your code is working again.

pk Malik Umer Farooq Replied 6 years ago

> Why did you put that Javascript inside the HTML
instead of using Ossn's convention explained in the Helloworld component?

As its does not require add js in separate file but for best performance i think its suggested use another separate javaScript or for js code in other file for reading the file make more easily for any person and a good developer do that but i add js bottom of file only for checking is it work? i means my js code but its work bottom and not work inside js seperate file
I add the line ossn_extend_view("js/opensource.socialnetwork", "helpdisk/js");
and create js.php inside helpdisk folder
its not work at all but if i add only alert("working"); its work so question how to add these code in footer? so i think it become work
when i add these code inside the consule

    $.post(Ossn.site_url+'/Help/',{action:'help'},function(data){
        alert(data);
    });

in alert box show
enter image description here

German Michael Zülsdorff Replied 6 years ago

I'm trying to do so all the time, Malik.

The next thing to learn is:
Before doing real coding, you have to make friends with the programming environment.

If you are ignoring the basic rules already right from the beginning
it is likely that your code doesn't work as expected.

So, the next question is:
Why did you put that Javascript inside the HTML
instead of using Ossn's convention explained in the Helloworld component?

pk Malik Umer Farooq Replied 6 years ago

help me SIR to addressed/figure out the issue please i unable to find where is wrong

German Michael Zülsdorff Replied 6 years ago

> i forget ossn have preloaded jquery

Yeah, so what we learned today:
1.) It's worth to search through COMPLETE Ossn
BEFORE installing any 3rd party libraries
Remember the instructions on https://www.opensource-socialnetwork.org/wiki/view/1137/how-to-find-something-a-word-pattern-in-the-source-code

2.) You can't expect your code to run correctly
as long as you still see Javascript errors in your console.

pk Malik Umer Farooq Replied 6 years ago

i also fix that previous i write

echo $title = $_REQUEST['title'];

Now

echo $title = $_REQUEST['search'];

but same issues
also in my error log show following

    [01-Dec-2017 10:12:19 UTC] PHP WARNING: 2017-12-01 10:12:19 (UTC): "Invalid argument supplied for foreach()" in file C:\wamp64\www\ossn\components\Helpdisk\plugins\default\pages\page.php (line 61)
[01-Dec-2017 10:12:20 UTC] PHP WARNING: 2017-12-01 10:12:20 (UTC): "Invalid argument supplied for foreach()" in file C:\wamp64\www\ossn\components\Helpdisk\plugins\default\pages\page.php (line 61)

So i change code to following

<?php if(isset($_REQUEST['search'])){
    echo $title = $_REQUEST['search'];    
    //$obj = new OssnObject;
    //$search = $obj->searchObject(['search_type'=>false,'title' => "{$title}",'type' => 'help','subtype' => 'helpdisk']);
    /*echo "       <div class='panel panel-default'>
        <div class='panel-heading'>
            <h1 class='panel-title'><?= ossn_print('helpdisk:search').$search; ?></h1>
        </div>
        <div class='panel-body'>
        <?php //foreach ($search as $value){?>
        <a href='<?= ossn_site_url(); ?>/Help?q=<?php // $value->guid; ?>'id='questions'><?php // $value->title; ?></a><br>
        <?php //} ?>
        </div>
        </div>";*/
?>
<?php } ?>

Same error i also update code to github
https://github.com/Lablnet/HelpDisk/commit/2bd0e9eab78fb5c599f7f4db37d361497dd99add

pk Malik Umer Farooq Replied 6 years ago

in my consule show error like that

Uncaught TypeError: $(...).datepicker is not a function
at HTMLDocument.eval (eval at <anonymous> (vendors/jquery/jquery-1.11.1.min.js:2), <anonymous>:900:38)
at j (eval at <anonymous> (vendors/jquery/jquery-1.11.1.min.js:2), <anonymous>:2:27244)
at Object.fireWith [as resolveWith] (eval at <anonymous> (vendors/jquery/jquery-1.11.1.min.js:2), <anonymous>:2:28057)
at ready (eval at <anonymous> (vendors/jquery/jquery-1.11.1.min.js:2), <anonymous>:2:29891)

but i think i not create this function

pk Malik Umer Farooq Replied 6 years ago

i remove jquery same error ajax not work lets try search something in box see like this happens
enter image description here

here is code snapshot enter image description here

Thanks for help but need more help
i forget ossn have preloaded jquery

German Michael Zülsdorff Replied 6 years ago

Okay, let's continue exploring your component...
I installed it on https://newblue.ongolito.net,
and walking to your Help page
I'm running into a massive javascript error, as my developer console shows:
https://newblue.ongolito.net/demofiles/discussion-2675/javascript-crashing.png

I got no problems like that on my other pages,
so this error must be caused by your component!

And in fact: Your page.php is loading a jquery library which seems to be the reason.

Thus, Question No. 2:
Why are you loading this library here?

Premium Version

Due to the many requests in the past for additonal features and components we have decided to develope a premium version. Features like Hashtags, Videos, Polls, Events, Stories, Link Preview, etc included in it.

$199 (Life Time)
Learn More

Other Questions