Any alternative to avoid page refresh and alternative of location.reload()?

JavaScript
1

In my jQuery dialog, since wanted to refresh the page when OK button is clicked, I added a location.reload() inside success function.

Now, when user clicks on Cancel button and tries to open the dialog again, it doesn’t open. I can add another location.reload() inside the following function like this:

                         text: "Cancel",
	                     click: function() {
	                         $(this).dialog("close");
                                 location.reload();
	                     }

But I am wondering if there is anything better than using location.reload() and without refreshing the page?

<div id="add_dialog" title="Add New Data" style="display:none;">
          <form>
            <p>
             <b>Name:</b><br/>
              <input id="dataName" type="text" name="name" />
            </p>
            <p>Description:
              <textarea id="dataDescription" name="dataDescription" rows="4" cols="20"></textarea>
             </p>
          </form>
        </div>

$("#add_dialog").dialog({
         autoOpen: false,
         closeText:false,
           buttons: [
	                 {
	                   text: "Ok",
	                   icon: "ui-icon-heart",
	                   click: function() {
			                	 console.log("OK button clicked");  
			                	 let jsonData = {some json data  }
			                	$.ajax({
									      type: "Post",
									      url: "url",
									      data: JSON.stringify(jsonData),
									      contentType: 'application/json',
									      async: true,
									      cache: false,
									      success: function(data) {
									        									        	
											        									        											        	
										        	   $.ajax({
															  url:'url1',
															  type:"POST",
															  data:'url2',
															  contentType:"text/uri-list",
															  dataType:"json",
															  success: function(){
															      location.reload();
															  }
															})
									      }
									    });
                               $( this ).dialog( "close" );
	                   }
	                 
	                   
	                 },
	                 {
	                     text: "Cancel",
	                     click: function() {
	                         $(this).dialog("close");
	                     }
	                 }
          ]
	 
     });
2

I want to help, but that means making my own separate version of what you’re dealing with, to experiment with. It looks like you are using jQuery, and some kind of dialog widget. Is that a part of jQuery UI? I’ll try it out.

Nothing shows because the dialog is not initially displayed. What extra is needed to get it to show? I see dialog(“close”) in the code so will try `dialog(“open”), which works. We can add that to an Add New Data button. Our starting point is https://jsfiddle.net/pmw57/Lfukrzts/1/

The presentation is looking terrible, so the CSS theme is obtained from https://code.jquery.com/ui/ and added to the fiddle, giving us a much better looking starting point at https://jsfiddle.net/pmw57/Lfukrzts/2/

We can now focus much more easily on what needs to be done.

The cancel button seems to behave properly in the test example that I put together, where we can easily get back to the dialog box after cancelling. You said:

We are not experiencing the same thing here. The cancel button and return back to the dialog works for me, but it doesn’t work for you.

To make further progress on this I need to be able to experience the same problem that you are having.

Can you either please put together some simple test code that we can use to run locally, or provide a link to a webpage that lets us experience your problem?

1 Like
3

Thanks Paul. Unfortunately, I am unable to share a link to the website as it’s not public. So, I will skip on the following issue as I have the workaround - I added location.reload() for cancel button as well.
when user clicks on Cancel button and tries to open the dialog again, it doesn’t open.

Coming back to my other question, is there any other alternative of refreshing the page, I mean other than location.reload()? Thanks !

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.